<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>监理服务系统</title>
	<!--公用样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css" />
	<!--页面样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css" />
	<!--Layui-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/layui.css" />
	<!--页面样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css" />
	<!--JQ-->
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
	<!--Layui-->
	<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
	<!--公用样式JS-->
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
	<!--进度条-->
</head>

<style type="text/css">

	.Right {
		width: 100%;
		overflow-y: scroll;
	}

	.layui-col-md3 {
		width: 25%;
	}

	.layui-tab {
		margin: 50px 0;
		text-align: left !important;
		border-radius: 10px;
		margin-left: 30px;
		width: 93%;
		padding: 1% 2%;
		margin: 30px auto;
		border-radius: 10px 10px 0px 0px;
		margin: 20px 1px;
	}
	.layui-tab-content {
		padding: 0px;
	}

	.layui-tab-title {
		position: relative;
		left: 0;
		height: 40px;
		white-space: nowrap;
		font-size: 0;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		transition: all .2s;
		-webkit-transition: all .2s;
		background-color: white;
		border-radius: 10px 10px 0px 0px;

	}
</style>

<body>
<!--容器-->

<div class="container index clearfix">
	<!--右侧内容-->
	<div class="Right fr">

		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-top: 12px;">
			<ul class="layui-tab-title bold " style="padding-top: 20px;padding-left: 20px;">
				<li class="layui-this">按照项目统计</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
						<div class="myDatatTop whitebg pl30 pt20 pb15">
							<div class="myDataCentere"
								 style="margin-top: 0px;margin-left: 0px;  margin-bottom: 20px; width: 96%;">
								<div class="mt30">
									<div class="approval clearfix">
                                        <ul class="clearfix">
										<li>
										<select name="province" id="province" onchange="getCity()">
											<option value="">请选择</option>
											<#list provincelist as vo>
												<option value="${vo.code}">${vo.name}</option>
											</#list>
										</select>
										<select name="city" id="city"
												style="width:30% !important;">
											<option value="">请选择</option>
											<#list citylist as vo>
												<option value="${vo.code}">${vo.name}</option>
											</#list>
										</select>
										</li>
										<!--多选-->
										<li>
											<select name="ywType" id="ywType">
												<option value="">选择业务类型</option>
												<#list BTlist as vo>
													<option value="${vo.badtCode}">${vo.badtName}</option>
												</#list>
											</select>
										</li>
										<li>
											<select name="hyType" id="hyType">
												<option value="">选择行业类型</option>
												<#list HYlist as vo>
													<option value="${vo.badtCode}">${vo.badtName}</option>
												</#list>
											</select>
										</li>
										<li>
										<select name="speLevel" id="speLevel" class="fl ml20">
											<option value="">选择分数段</option>
											<option value="1">一颗星</option>
											<option value="2">两颗星</option>
											<option value="3">三颗星</option>
											<option value="4">四颗星</option>
											<option value="5">五颗星</option>
										</select>
										</li>
                                            </ul>
										<button class="select-on layui-btn layui-btn-sm" onclick="query()">筛选</button>
									</div>
									<div class="mt20">
										<table id="projectList" style="height: 300px;" class="layui-hide" lay-filter="project"></table>
									</div>
								</div>
							</div>
						</div>
				</div>
				<div class="layui-tab-item">
					<div class="myDatatTop whitebg">

					</div>
				</div>
				<div class="layui-tab-item">
					<div class="myDatatTop whitebg">

					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--公用样式JS-->
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/cardUtils.js"></script>

<script type="text/html" id="toolBar">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
</script>

<script>
	var element = "";
	layui.use('element', function () {
		element = layui.element;
	});

	var layer;
	var form = layui.form;

	function query() {
		alert("22222")
		var ywType = $('#ywType').val();
		var speLevel = $('#speLevel').val();
		var hyType = $('#hyType').val();
		var province = $('#province').val();
        var city = $('#city').val();
		if (province != "") {
			province = province.replace(",", "")
		}
		var city = $('#city').val();
		if (city != "") {
			city = city.replace(",", "")
		}
		var jsondata = {
			ywType: ywType,
			speLevel: speLevel,
			province: province,
			city: city,
			hyType: hyType,
		};
		table.reload('projectList', {
			where: jsondata
		});
	}

	function getCity() {
		var code = $('#province option:selected').val();
		if (code == "") {
			return;
		}
		var code = code.replace(",", "");
		$.ajax({
			cache: true,
			type: "get",
			url: "/sys/register/getCity",
			data: {"code": code},
			success: function (data) {
				$("#city").empty();
				$("#city").append("<option value=''>选择市</option>");
				for (var i = 0; i < data.length; i++) {
					$("#city").append("<option value='" + data[i].code + "'>" + data[i].name + "</option>");
				}
			}, error: function (error) {
				return;
			}
		})
	}

	$(function () {
		layui.use(['form', 'layer'], function () {
			form.verify({});
		})

		layui.use('table', function () {

			table = layui.table;
			element = element;
			//方法级渲染
			tableIns = table.render({
				id: 'projectList',
				elem: '#projectList',
				url: '/sys/statistics/showProjectList',
				cols: [[
					{
						title: '序号', width: '5%', templet: function (res) {
							return res.LAY_INDEX;
						}
					},
					{field: 'badtName', title: '业务类型', width: '40%', sort: false},
					{field: 'speLevel', title: '评分', width: '40%', sort: false},
					{field: 'number', title: '项目个数', width: '40%', sort: false},
					{field: 'remark', title: '操作', width: '20%', toolbar: "#toolBar"}
				]],
				page: true,
				done: function (res, currentCount) {
					//***重点***：table渲染完成后渲染element进度条
					element.render()
				}
			});
		});
		layui.use('table', function () {

			table = layui.table;
			element = element;
			//方法级渲染
			tableIns = table.render({
				id: 'projectList2',
				elem: '#projectList2',
				url: '/sys/statistics/showProjectList',
				cols: [[
					{
						title: '序号', width: '5%', templet: function (res) {
							return res.LAY_INDEX;
						}
					},
					{field: 'badtName', title: '业务类型', width: '40%', sort: false},
					{field: 'speLevel', title: '评分', width: '40%', sort: false},
					{field: 'number', title: '项目个数', width: '40%', sort: false},
					{field: 'remark', title: '操作', width: '20%', toolbar: "#toolBar"}
				]],
				page: true,
				done: function (res, currentCount) {
					//***重点***：table渲染完成后渲染element进度条
					element.render()
				}
			});
		});
		table.on('checkbox(project)', function (obj) {
			//console.log(obj)
		});
		//监听工具条
		table.on('tool(project)', function (obj) {
			var data = obj.data;
			if (obj.event === 'detail') {
				layer.alert('业务类型：'+ JSON.stringify(data.badtName))
			}
		});
		table.on('tool(project2)', function (obj) {
			var data = obj.data;
			if (obj.event === 'detail') {
				layer.alert('业务类型：'+ JSON.stringify(data.badtName))
			}
		});

	})

</script>
</body>

</html>